<template>
	<view class="commond-container">
		<scroll-view scroll-y="true" class="scroll-container">
			<view class="recommend-container">
				<!-- 老板说暂时不要 兴趣和性格 -->
				<!-- <view class="individuality-title">选择恋人类型</view>
        <view class="individuality-card">
          <view class="individuality-card-box">
            <view class="individuality-explain character-icon">
              <image
                src="http://static.kuaimayoupin.com/9065761417648923.png"
                mode="aspectFit"
                class=""
              ></image>
              <text>性格</text>
            </view>
            <view class="individuality-tag-box characterList">
              <text
                v-for="(item, index) in characters"
                :key="index"
                :class="[
                  'individuality-tag',
                  activityCharacter(item) ? 'active' : '',
                ]"
                @click="characterEvent(item)"
              >
                {{ item.label }}
              </text>
            </view>
          </view>
          <view class="individuality-card-box card-box-bottom">
            <view class="individuality-explain interest-icon">
              <image
                src="http://static.kuaimayoupin.com/0806230835299817.png"
                mode="aspectFit"
                class=""
              ></image>
              <text>兴趣</text>
            </view>
            <view class="individuality-tag-box interestList">
              <text
                v-for="(item, index) in interests"
                :key="index"
                :class="[
                  'individuality-tag',
                  activityInterest(item) ? 'active' : '',
                ]"
                @click="interestEvent(item)"
              >
                {{ item.label }}
              </text>
            </view>
          </view>
          <view class="tag-selected" v-show="isShowSelected">
            <view class="tag-selected-box">
              <view
                v-for="(item, index) in totoaSelected"
                :key="index"
                :class="['selected-tag', selectedStyle(item)]"
                @click="totoalSelectedEvent(item)"
              >
                <text>{{ item.label }}</text>
                <u-icon name="close" color="#ffffff" size="20"></u-icon>
              </view>
            </view>
          </view>
        </view> -->
				<view class="individuality-title">
					<image class="individuality-title-image" src="/static/images/mine/dingzhi_tips.png"
						mode="heightFix"></image>
					我的理想CP
					<span class="individuality-title-span">
						双方条件都匹配，缘分才高哦
					</span>
				</view>
				<view class="other-require-card">
					<view class="other-require-item-box">
						<text class="other-require-item-title">年龄</text>
						<view class="other-require-item-right" @click="showSelectedView(1)">
							<text class="other-require-item-value">{{
                agesStr || "请选择"
              }}</text>
							<u-icon name="arrow-right" color="#8389A0"></u-icon>
						</view>
					</view>
					<u-line color="#f5f5f5"></u-line>
					<view class="other-require-item-box">
						<text class="other-require-item-title">婚姻状况</text>
						<view class="other-require-item-right" @click="showSelectedView(2)">
							<text class="other-require-item-value">{{
                getMaritalStatus() || "请选择"
              }}</text>
							<u-icon name="arrow-right" color="#8389A0"></u-icon>
						</view>
					</view>
					<u-line color="#f5f5f5"></u-line>
					<view class="other-require-item-box">
						<text class="other-require-item-title">身高范围</text>
						<view class="other-require-item-right" @click="showSelectedView(3)">
							<text class="other-require-item-value">{{
                lengthStr || "请选择"
              }}</text>
							<u-icon name="arrow-right" color="#8389A0"></u-icon>
						</view>
					</view>
					<u-line color="#f5f5f5"></u-line>
					<view class="other-require-item-box">
						<text class="other-require-item-title">最低学历</text>
						<view class="other-require-item-right" @click="showSelectedView(4)">
							<text class="other-require-item-value">{{
                getEducation() || "请选择"
              }}</text>
							<u-icon name="arrow-right" color="#8389A0"></u-icon>
						</view>
					</view>
					<!-- <u-line color="#f5f5f5"></u-line>
          <view class="other-require-item-box">
            <text class="other-require-item-title">工作地</text>
            <view class="other-require-item-right" @click="addressShowEvent()">
              <text class="other-require-item-value">{{
                address || "请选择"
              }}</text>
              <u-icon name="arrow-right" color="#8389A0"></u-icon>
            </view>
          </view> -->
					<u-line color="#f5f5f5"></u-line>
					<view class="other-require-item-box">
						<text class="other-require-item-title">月最低收入</text>
						<view class="other-require-item-right" @click="showSelectedView(6)">
							<text class="other-require-item-value">{{
                getSalary() || "请选择"
              }}</text>
							<u-icon name="arrow-right" color="#8389A0"></u-icon>
						</view>
					</view>
					<u-line color="#f5f5f5"></u-line>
					<view class="other-require-item-box">
						<text class="other-require-item-title">最在意对方</text>
						<view class="other-require-item-right" @click="chooseCareAction">
							<text class="other-require-item-value">{{
                best_of_all_str || "请选择"
              }}</text>
							<u-icon name="arrow-right" color="#8389A0"></u-icon>
						</view>
					</view>
				</view>
				<view class="customize-btn" @click="goCustomize"> 定制我的缘分 </view>
				<u-select v-model="show" :mode="selectedModel" :list="list" @confirm="confirm"></u-select>
				<uu-picker mode="region" v-model="addressShow" :params="params" @confirm="provinceEvent"></uu-picker>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		isEmpty
	} from "@/util/tool.js";
	import {
		EventBus
	} from "@/util/event-bus.js";
	import {
		customizeLover,
		getDing
	} from "@/api/home/home.js";
	import config from "@/store/modules/config.js";
	import uuPicker from "@/pages/home/components/u-picker";
	import {
		loadInterestLabels,
		loadPersonalityLabels,
		completeInformation,
	} from "@/api/user/user.js";
	export default {
		components: {
			uuPicker
		},
		computed: {
			isShowSelected() {
				return this.totoaSelected.length > 0;
			},
		},
		data() {
			return {
				isOnce:"",
				dingzhiJson: {},
				characters: [],
				interests: [],
				characterList: [], // 选择的性格
				interestList: [], // 选择的兴趣
				totoaSelected: [],
				form: {
					character: "",
					interest: "",
					soliloquy: "",
				},
				show: false,
				addressShow: false,
				list: [],
				selectedModel: "mutil-column",
				agesStr: undefined, // 年龄
				marriage: undefined, // 婚姻
				lengthStr: undefined, // 身高
				education: undefined, // 学历
				salary: undefined, //薪资
				address: undefined, // 地址
				best_of_all: undefined,
				best_of_all_str: undefined,
				params: {
					province: true,
					city: true,
					area: false,
				},
			};
		},
		created() {
			let that = this;

			getDing().then((res) => {
				this.dingzhiJson = res.data;
				this.agesStr = this.dingzhiJson.age;
				this.marital_status = this.dingzhiJson.marital_status;
				this.lengthStr = this.dingzhiJson.height;
				this.education = this.dingzhiJson.education;
				this.address = this.dingzhiJson.work_place;
				this.salary = this.dingzhiJson.salary;
				this.best_of_all_str = this.dingzhiJson.best_of_all.join(",");
				this.characterList = this.dingzhiJson.personality;
				this.interestList = this.dingzhiJson.interest;
				this.totoaSelectedFunc();

				console.log(characterList);
				console.log("---");
			});

			EventBus.$on("careSure", function(res) {
				that.handleCareData(res);
			});
		},
		onLoad(options) {
			const { once } = options;
			this.isOnce = once;
		},
		mounted() {
			loadInterestLabels().then((res) => {
				this.interests = res.data;
				var a = this.interests;
				var b = this.interestList;
				a.map((item) => {
					b.map((it) => {
						if (item._id == it._id) {
							item.selected = true;
						}
					});
				});
			});
			loadPersonalityLabels().then((res) => {
				this.characters = res.data;
				console.log(this.characters);
				var a = this.characters;
				var b = this.characterList;
				a.map((item) => {
					b.map((it) => {
						if (item._id == it._id) {
							item.selected = true;
						}
					});
				});
			});
		},
		methods: {
			// 兴趣
			activityInterest(item) {
				return item.selected || false;
			},
			/// 性格
			activityCharacter(item) {
				return item.selected || false;
			},
			/// 婚姻
			getMaritalStatus() {
				let marital_status = this.marital_status || {};
				return marital_status.label;
			},
			/// 教育
			getEducation() {
				let education = this.education || {};
				return education.label;
			},
			/// 薪水
			getSalary() {
				let salary = this.salary || {};
				return salary.label;
			},
			selectedStyle(item) {
				if (this.interestList.indexOf(item) != "-1") {
					return "interest-selected";
				} else {
					return "character-selected";
				}
			},

			provinceEvent(e) {
				console.log(e);
				let cityCode = e.city.value;
				if (
					cityCode === "1101" ||
					cityCode === "1201" ||
					cityCode === "3101" ||
					cityCode === "5001" ||
					cityCode === "5002"
				) {
					this.address = e.province.label;
				} else {
					this.address = e.city.label;
				}

				console.log(this.address);
			},
			addressShowEvent() {
				this.addressShow = true;
			},
			characterEvent(item) {
				item.selected = !item.selected;
				if (this.characterList.indexOf(item) == "-1") {
					this.characterList.push(item);
				} else {
					this.characterList.splice(this.characterList.indexOf(item), 1);
				}
				this.totoaSelectedFunc();
			},
			interestEvent(item) {
				item.selected = !item.selected;
				if (this.interestList.indexOf(item) == "-1") {
					this.interestList.push(item);
				} else {
					this.interestList.splice(this.interestList.indexOf(item), 1);
				}
				this.totoaSelectedFunc();
			},
			totoaSelectedFunc() {
				this.totoaSelected = [];
				this.totoaSelected = this.totoaSelected.concat(this.characterList);
				this.totoaSelected = this.totoaSelected.concat(this.interestList);
				console.log("totoaSelected");
				console.log(this.totoaSelected);
			},
			totoalSelectedEvent(item) {
				let itemId = item._id;
				for (let index in this.characters) {
					let character = this.characters[index];
					if (character._id === itemId) {
						character.selected = !character.selected;
					}
				}
				for (let index in this.interests) {
					let interest = this.interests[index];
					if (interest._id === itemId) {
						interest.selected = !interest.selected;
					}
				}

				for (let index in this.characterList) {
					let cItem = this.characterList[index];
					if (cItem._id === itemId) {
						this.characterList.splice(this.characterList.indexOf(cItem), 1);
					}
				}
				for (let index in this.interestList) {
					let iItem = this.interestList[index];
					if (iItem._id === itemId) {
						this.interestList.splice(this.interestList.indexOf(iItem), 1);
					}
				}
				if (this.totoaSelected.indexOf(item) != "-1") {
					this.totoaSelected.splice(this.totoaSelected.indexOf(item), 1);
				}
				console.log("characterList", this.characterList);
				console.log("interestList", this.interestList);
			},
			showSelectedView(type) {
				this.list = [];
				if (type === 1) {
					this.list = config.ages();
					this.selectedModel = "mutil-column";
				} else if (type === 2) {
					this.list = config["marital_status"];
					this.selectedModel = "single-column";
				} else if (type === 3) {
					this.list = config.heights();
					this.selectedModel = "mutil-column";
				} else if (type === 4) {
					this.selectedModel = "single-column";
					this.list = config["education"];
				} else if (type === 6) {
					this.selectedModel = "single-column";
					this.list = config["salary"];
				}
				this.show = true;
			},
			confirm(e) {
				console.log(JSON.stringify(e));
				let extra = e[0].extra;
				if (extra === "age") {
					let age1 = e[0].value;
					let age2 = e[1].value;
					if (age1 < age2) {
						this.agesStr = e[0].label + "岁" + "-" + e[1].label + "岁";
					} else {
						this.agesStr = e[1].label + "岁" + "-" + e[0].label + "岁";
					}
				} else if (extra === "marital_status") {
					/// 婚姻状况
					this.marital_status = e[0];
				} else if (extra === "height") {
					let height1 = e[0].value;
					let height2 = e[1].value;
					if (height1 < height2) {
						this.lengthStr = e[0].label + "cm" + "-" + e[1].label + "cm";
					} else {
						this.lengthStr = e[1].label + "cm" + "-" + e[0].label + "cm";
					}
				} else if (extra === "education") {
					this.education = e[0];
				} else if (extra === "salary") {
					this.salary = e[0];
				}
			},
			chooseCareAction() {
				uni.navigateTo({
					url: "/pages/home/care/care",
				});
			},
			/// 处理在意的数据
			handleCareData(res) {
				this.best_of_all = res;
				this.best_of_all_str = res.join(";");
				console.log("best_of_all--------", this.best_of_all);
			},
			goCustomizeSuccess(){
				
				let certificated = getApp().globalData.userInfo.certificated || false;
				if (certificated == false && this.isOnce == "once"){
					// 没有认证去认证
					uni.redirectTo({ url: "/pageA/realName/realName?once=once" });
				} else {
					setTimeout(() => {
						uni.reLaunch({
							url: "/pages/home2/home"
						});
					}, 1000);
				}
				
			},
			// 去定制
			goCustomize() {
				///老板说：选择性格和兴趣暂时非必填
				// if (this.characterList.length === 0) {
				//   uni.showToast({
				//     title: "请选择性格",
				//     icon: "none",
				//   });
				//   return;
				// }
				// if (this.interestList.length === 0) {
				//   uni.showToast({
				//     title: "请选择兴趣",
				//     icon: "none",
				//   });
				//   return;
				// }
				if (isEmpty(this.agesStr)) {
					uni.showToast({
						title: "请选择年龄",
						icon: "none",
					});
					return;
				}
				if (isEmpty(this.getMaritalStatus())) {
					uni.showToast({
						title: "请选择婚姻状况",
						icon: "none",
					});
					return;
				}
				if (isEmpty(this.lengthStr)) {
					uni.showToast({
						title: "请选择身高",
						duration: 2000,
					});
					return;
				}
				if (isEmpty(this.getEducation())) {
					uni.showToast({
						title: "请选择学历",
						duration: 2000,
					});
					return;
				}
				// if (isEmpty(this.address)) {
				//   uni.showToast({
				//     title: "请选择工作地",
				//     duration: 2000,
				//   });
				//   return;
				// }
				if (isEmpty(this.getSalary())) {
					uni.showToast({
						title: "请选择薪资",
						duration: 2000,
					});
					return;
				}

				if (isEmpty(this.best_of_all_str)) {
					uni.showToast({
						title: "请选择你最在意的地方",
						duration: 2000,
					});
					return;
				}
				let data = {
					labels: "",
					age: this.agesStr,
					height: this.lengthStr, // 身高
					work_place: this.address, // 工作地址
					salary: this.salary, // 月收入
					personality: this.characterList, // 性格类型
					interest: this.interestList, //兴趣
					best_of_all: this.best_of_all, //最在意
					education: this.education, // 学历
					marital_status: this.marital_status, // 婚姻状况
				};
				console.log(data);
				let that = this
				customizeLover(data).then((res) => {
					var resMeg = "";
					if (res.status == 1) {
						resMeg = res.message || "定制成功";
						getApp().globalData.userInfo.customized = true;
						EventBus.$emit("didCustomize", true);
						that.goCustomizeSuccess()
					} else {
						resMeg = res.message || "定制失败";
					}
					uni.showToast({
						title: resMeg,
						icon: "none",
					});
					console.log("定制结果----", JSON.stringify(res));
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	* {
		display: flex;
		box-sizing: border-box;
	}

	.commond-container {
		height: 100%;

		.scroll-container {
			width: 100%;
			height: 100%;
			background-color: #ffffff;

			.recommend-container {
				width: 100%;
				padding: 0 32rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.customize-btn {
					width: 686rpx;
					height: 80rpx;
					background: linear-gradient(135deg,
							#FF5E98,
							#FF5E6A,
						);
					border-radius: 40rpx;
					text-align: center;
					color: #fff;
					line-height: 80rpx;
					margin-bottom: 40rpx;
					margin-top: 10rpx;
					font-size: 30rpx;
					position: fixed;
					bottom: 0;
				}

				.individuality-title {
					width: 100%;
					font-size: 36rpx;
					font-weight: 500;
					color: rgba(71, 74, 88, 1);
					line-height: 24px;
					margin-bottom: 10rpx;
					margin-top: 16rpx;
					display: flex;
					flex-direction: row;
					align-items: center;

					.individuality-title-image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 16rpx;
					}

					.individuality-title-span {
						height: 48rpx;
						font-size: 26rpx;
						font-weight: 300;
						color: #474a58;
						line-height: 48rpx;
						margin-left: 10rpx;
					}
				}

				.individuality-card {
					width: 100%;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 3px 10px 0px rgba(0, 42, 64, 0.07);
					border: 1px solid rgba(233, 235, 240, 1);
					margin-bottom: 50rpx;
					border-radius: 16rpx;
					position: relative;

					.character-icon {
						color: #ffd14d;
						font-size: 24rpx;
						line-height: 36rpx;
						margin-right: 34rpx;

						image {
							display: block;
							width: 48rpx;
							height: 48rpx;
							margin: 0 auto 10rpx;
						}
					}

					.interest-icon {
						color: #4388ff;
						font-size: 24rpx;
						line-height: 36rpx;
						margin-right: 34rpx;

						image {
							display: block;
							width: 56rpx;
							height: 42rpx;
							margin: 0 auto 10rpx;
						}
					}

					.characterList .active {
						background: #f9d05a;
						color: #fff;
						border: 1px solid #f9d05a;
					}

					.interestList .active {
						background: #489eff;
						color: #fff;
						border: 1px solid #489eff;
					}

					.individuality-card-box {
						display: flex;
						justify-content: space-between;
						padding: 40rpx 18rpx 0 30rpx;

						.individuality-tag-box {
							width: 100%;
							display: flex;
							flex-wrap: wrap;

							.individuality-tag {
								display: inline-block;
								padding: 6rpx 18rpx;
								border-radius: 40rpx;
								border: 1px solid rgba(223, 225, 236, 1);
								margin-bottom: 10rpx;
								margin-right: 12rpx;
								font-size: 24rpx;
								box-sizing: border-box;
							}
						}
					}

					.card-box-bottom {
						padding-bottom: 40rpx;
					}

					.tag-selected {
						width: 100%;
						background-color: #e9ebf0;
						padding: 30rpx 20rpx;

						.interest-selected {
							background-color: #489eff;
							border: 1px solid #489eff;
							color: #fff;
						}

						.character-selected {
							background-color: #f9d05a;
							border: 1px solid #f9d05a;
							color: #fff;
						}

						.tag-selected-box {
							width: 100%;
							display: flex;
							flex-wrap: wrap;

							.selected-tag {
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: space-between;
								padding: 6rpx 18rpx;
								border-radius: 40rpx;
								border: 1px solid rgba(223, 225, 236, 1);
								margin-bottom: 10rpx;
								margin-right: 12rpx;
								box-sizing: border-box;

								text {
									font-size: 26rpx;
									margin-right: 10rpx;
								}
							}
						}
					}
				}

				.other-require-card {
					width: 100%;
					background: rgba(255, 255, 255, 1);
					margin: 0rpx 0rpx 32rpx 0rpx;
					display: flex;
					flex-direction: column;

					.other-require-item-box {
						display: flex;
						width: 100%;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						padding-top: 25rpx;
						padding-bottom: 25rpx;
					}

					.other-require-item-title {
						height: 60rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: #333;
						line-height: 60rpx;
					}

					.other-require-item-right {
						.other-require-item-value {
							height: 60rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #5760B4;
							line-height: 60rpx;
						}
					}
				}
			}
		}
	}

	.picker-view {
		position: fixed;
		bottom: 0;
		z-index: 999;
	}
</style>
